import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LfAudioNoise extends StatefulWidget {
  final double width;
  final bool isCurrent;
  final double progress;
  final Color startColor;
  final Color endColor;
  const LfAudioNoise(
      {Key? key,
      required this.width,
      required this.isCurrent,
      required this.progress,
      required this.startColor,
      required this.endColor})
      : super(key: key);

  @override
  LfAudioNoiseState createState() {
    return LfAudioNoiseState();
  }
}

class LfAudioNoiseState extends State<LfAudioNoise> {
  late double count = 0;
  double progress = 0.001;
  @override
  void initState() {
    count = widget.width / 4.r;

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    progress = widget.progress;
    if (progress < 0.001 || !widget.isCurrent) {
      progress = 0.001;
    }
    return SizedBox(
      width: widget.width,
      child: Stack(
        children: [
          ShaderMask(
            blendMode: BlendMode.srcIn,
            shaderCallback: (bounds) {
              return LinearGradient(
                colors: [
                  widget.endColor,
                  widget.endColor,
                  widget.startColor,
                  widget.startColor,
                ],
                stops: [0, progress, progress, 1],
              ).createShader(bounds);
            },
            child: FittedBox(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  for (var index = 0; index < count; index++) _item(index)
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _item(int index) {
    var height = 7.r;
    if (index % 4 == 0) {
      height = 7.r;
    } else if (index % 4 == 1) {
      height = 14.r;
    } else if (index % 4 == 2) {
      height = 17.r;
    } else {
      height = 10.r;
    }

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 1.r),
      child: Container(
        decoration: BoxDecoration(
            color: Colors.blueAccent, borderRadius: BorderRadius.circular(2.r)),
        width: 2.r,
        height: height,
      ),
    );
  }
}
